<template>
    <div id="shop">
        <div :class="['container',isLogin[userId]==true?Object.keys(cars).length==0?'':'container1':'']">
            <div class="emptyWrap" v-show="!isLogin[userId]||Object.keys(cars).length==0">
                <div class="emptyCon">
                    <div class='emptyImg loginoutEmpty' v-if="!isLogin[userId]">
                        购物车还空空如也哦~<br/> 登录后将同步购物车中商品
                        <br/>
                        <router-link to='/login' class="tipBtn">立即登录</router-link>
                    </div>
                    <div class="emptyImg loginedEmpty" v-if="isLogin[userId]">
                        <p>购物车空空如也哦~</p>
                        <router-link to='/' class="tipBtn1">去首页逛逛</router-link>
                    </div>
                </div>
            </div>
            <div class="posBox" v-show="isLogin[userId]&&Object.keys(cars).length!==0">
                <div class="position">欣才IT学院
                    <span>(当前位置)</span>
                </div>
            </div>
            <div :class="['stores',Object.keys(val).length>3?'less':'more']" v-show="isLogin[userId]" v-for="(val,key,index) in cars" :key="index">
                <div class="content">
                    <div class="title" @click="$router.push('/details/'+key)" v-if="val2.id==key" v-for="val2 in shopArry" :key="val2.id">{{val2.shopNameTitle1}}{{val2.shopNameTitle2}}</div>
                    <div class="goodsBox">
                        <div class="goods" v-if="index==1||index==2" v-for="(val3,key,index) in val" :key="val3.id">
                            <img :src="imgUrl+val3.img">
                            <i class="goodsNum" v-if="val3.num!==1">{{val3.num}}</i>
                            <span>￥{{val3.price}}</span>
                        </div>
                        <div class="omit goods"></div>
                        <div class="nums" v-if="cars[key].carNum!==undefined">共{{cars[key].carNum}}件</div>
                    </div>
                </div>
            </div>
        </div>
        <AppFooter active='shopTab'></AppFooter>
    </div>
</template>

<script>
import $ from 'jquery'
export default {
    data(){
        return {
            shopArry:[]
        }
    },
    created(){
        this.getShop();
    },
    computed:{
        userId(){
            for(let key in this.isLogin){
                if(this.isLogin[key]){
                    return key;
                }
            }
        }
    },
    methods:{
        getShop(){
            this.axios.get('/shop').then((ret)=>{
            let {data,error}=ret.data;
            this.shopArry=data;
            }).catch(()=>{})
        },
    }
}
</script>

<style scoped lang='scss'>
#shop {
    height: 1331px;
    background-color: #f4f4f4;
    .container {
        text-align: center;
        background-color: #f4f4f4;
        .emptyWrap {
            width: 750px;
            height: 100%;
            background: #fff;
            padding-bottom: 232px;
            .emptyCon {
                padding-top: 255px;
                .emptyImg {
                    padding: 234px 0 375px 0;
                    line-height: 46px;
                    color: #666;
                    text-align: center;
                    font-size: 32px;
                    p {
                        margin: 0;
                        padding: 0;
                        font-size: 35px;
                    }
                    .tipBtn {
                        text-decoration: none;
                        display: inline-block;
                        margin: 35px auto 0;
                        padding: 0 35px;
                        height: 75px;
                        line-height: 70px;
                        border-radius: 46px;
                        font-size: 32px;
                        background: #47b34f;
                        color: #fff;
                    }
                    .tipBtn1 {
                        text-decoration: none;
                        display: inline-block;
                        margin-top: 18px;
                        padding: 23px 18px;
                        line-height: 1;
                        border-radius: 7px;
                        border: 3px solid #47b34f;
                        background: #fff;
                        color: #47b34f;
                    }
                }
                .loginedEmpty {
                    background: url(/static/home/cart_empty.png) center top no-repeat;
                    background-size: 226px 216px;
                }
                .loginoutEmpty {
                    background: url(/static/home/unlogin.png) center top no-repeat;
                    background-size: 224px 224px;
                }
            }
        }
        .posBox {
            display: inline-block;
            vertical-align: top;
            padding: 14px 16px;
            border-radius: 75px;
            background-color: #d1e7d3;
            margin: 35px 0 23px 0;
            .position {
                display: inline-block;
                vertical-align: top;
                line-height: 50px;
                padding: 0 32px 0 72px;
                border-radius: 50px;
                font-size: 32px;
                color: #fff;
                background: #47b34f url(/static/shop/loc2.png) 30px center no-repeat;
                background-size: 23px 28px;
                span {
                    font-size: 28px;
                    padding-left: 4px;
                    position: relative;
                    top: -2px;
                }
            }
        }
        .stores {
            margin: 0 14px 16px 14px;
            text-align: left;
            height: 330px;
            overflow: hidden;
            padding: 7px 4% 23px 1.6%;
            background: url(/static/shop/gc.png) 0 0 no-repeat;
            background-size: 100% 360px;
            .content {
                overflow: hidden;
                padding-left: 2.4%;
                .title {
                    display: block;
                    z-index: 3;
                    line-height: 110px;
                    height: 344px;
                    margin-bottom: -240px;
                    color: #333;
                    font-size: 35px;
                    background: url(/static/shop/m.png) right 40px no-repeat;
                    background-size: 16px 25px;
                    position: relative;
                }
                .goodsBox {
                    z-index: 2;
                    height: 215px;
                    padding: 2px 0 0 0;
                    position: relative;
                    .goods {
                        display: inline-block;
                        height: 194px;
                        vertical-align: top;
                        width: 124px;
                        margin-top: 32px;
                        padding-right: 75px;
                        margin-right: -50px;
                        text-align: center;
                        font-size: 28px;
                        line-height: 70px;
                        color: #333;
                        padding-bottom: 232px;
                        position: relative;
                        .goodsNum {
                            position: absolute;
                            font-size: 23px;
                            background-color: #FF5757;
                            color: #fff;
                            top: -3px;
                            right: 65px;
                            min-width: 35px;
                            height: 35px;
                            border-radius: 35px;
                            line-height: 35px;
                            text-align: center;
                        }
                        img {
                            width: 124px;
                            height: 124px;
                            border-radius: 11px;
                            vertical-align: top;
                        }
                        span {
                            display: block;
                        }
                    }
                }
            }
        }
        .less {
            .omit {
                background: url(/static/shop/ddd.png) left 56px no-repeat;
                background-size: 50px 11px;
            }
            .nums {
                position: absolute;
                right: 0;
                top: 0;
                line-height: 192px;
                font-size: 32px;
                color: #3c3c3c;
            }
        }
    }
    .container1 {
        padding-bottom: 232px;
    }
}
</style>
